<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
:out-of-range {
    background-color: red
}

:in-range, :in-range + div #descendant {
    background-color: green
}

</style>
<input id="input" type="number" min="1" max="10" value="17"></input>
<div>
    <div></div>
    <div id="descendant"></div>
    <div></div>
</div>

<script>
description("Use descendant invalidation sets for :in-range and :out-of-range pseudo classes.")

var transparent = "rgba(0, 0, 0, 0)";
var red = "rgb(255, 0, 0)";
var green = "rgb(0, 128, 0)";

shouldBe("getComputedStyle(input).backgroundColor", "red");
shouldBe("getComputedStyle(descendant).backgroundColor", "transparent");

document.body.offsetTop; // Force recalc.
input.value = "5";

if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
shouldBe("getComputedStyle(input).backgroundColor", "green");
shouldBe("getComputedStyle(descendant).backgroundColor", "green");

</script>
